<template>
	<view class="content">
		<!-- 用户头像header -->
		<view class='member-top' style="position: relative;">
			<view>
				<view v-if="hasLogin"
					style="position: absolute;top: 130rpx;left: 60rpx;display: flex;align-items: center;    width: calc(100% - 120rpx);">
					<image :src='userInfo.avatar'
						style="width: 150rpx;height: 150rpx;border-radius: 50%;background-color: #999;"></image>
					<view style="margin-left: 30rpx;font-size: 28rpx;font-weight: bold;color: #FFFFFF;flex: 1;">
						<view style="display: flex;align-items: center;">
							{{ userInfo.nickname }}
						</view>
						<view style="display: flex;margin-top: 10rpx;">
							ID:{{userInfo.id}}
							<view style="margin-left: 10rpx;color:#efd3a5" @click="sssskkk(userInfo.id)">复制</view>
						</view>
						<!-- <view style="margin-top: 10rpx;">
							可买礼包:<text style="color:#efd3a5">{{userInfo.ptnum}}次</text>
						</view> -->
					</view>
					<view>
						<image src="/static/set.png" style="width: 39rpx;height: 41rpx;" mode=""
							@click="Go('/pages/member/setting/index')"></image>
					</view>
				</view>
				<template v-else>
					<!-- #ifdef H5 || APP-PLUS -->
					<view style="padding-top:100rpx ;">
						<image class='user-head-img' mode="aspectFill" :src='$store.state.config.shop_logo'></image>
						<view class="login-btn" style="text-align: center;margin: 0 auto;" @click="toLogin">
							登录/注册
						</view>
					</view>
					<!-- #endif -->
				</template>
			</view>
		</view>
		<view style="position: relative;top: -50rpx;">
			<!-- 用户头像header end -->
			<view class="MyMoney">
				<view class="Title">
					<view class="TitleLeft">
						我的钱包
					</view>
					<!-- <view class="TitleRight" @click="navigateToHandle('/pages/member/balance/details')">
						余额明细
					</view> -->
				</view>
				<view class="Content">
					<view class="ContentLeft" @click="Go('/pages/member/balance/index')">
						<view class="LeftTop">
							我的余额
						</view>
						<view class="YE">
							{{userInfo.balance}}
						</view>
					</view>
					<view class="ContentRight" >
						<view class="RightTop">
							兑换积分
						</view>
						<view class="YE">
							{{userInfo.goodspoint}}
						</view>
					</view>
					
				</view>
			</view>
			<!-- 订单列表信息 -->
			<view class="Other"
				style="background-color: #202126;border-radius: 20rpx;margin: 20rpx 30rpx;padding:20rpx 26rpx 20rpx 34rpx  ;">
				<view class='cell-group' style="background-color: transparent;">
					<view class='cell-item right-img' style="background-color: transparent;"
						@click="orderNavigateHandle('/pages/member/order/orderlist')">
						<view class='cell-item-hd'>
							<view class='cell-hd-title' style="font-weight: bold; color: #fff; font-size: 28rpx;">
								订单
							</view>
						</view>
					</view>
				</view>
				<view class="List">
					<view v-for="(item,index) in orderItems" :key="index" class="Item"
						@click="orderNavigateHandle(item.url, item.tab)" v-show="item.show && index != 7 || chujupoint == 1" >
						<image :src="item.icon" style="width: 60rpx;margin-bottom: 16rpx;" mode="widthFix">
						</image>
						<view class="name">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="Banner" style="margin: 0 30rpx; border-radius: 20rpx;margin-bottom: 20rpx;"
				@click="Go('/pages/member/invite/index')">
				<image src="/static/fxhy.png" style="width: 100%;height: 237rpx;" mode=""></image>
			</view>
			<!-- 订单列表end -->
			
			<view class="Other">
				<view class="OtherTitle">
					其他功能
				</view>
				<view class="List">
					<view v-for="(item,index) in clerk" :key="index" class="Item"
						@click="navigateToHandle(item.router)">
						<image :src="item.icon" style="width: 40rpx;margin-bottom: 16rpx;" mode="widthFix">
						</image>
						<view class="name">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 其他功能菜单end -->
		<jh-tabbar />
	</view>
</template>


<script>
	const delay = (function() {
		let timer = 0
		return function(callback, ms) {
			clearTimeout(timer)
			timer = setTimeout(callback, ms)
		}
	})()
	import {
		checkLogin
	} from '@/config/mixins.js'
	export default {
		mixins: [checkLogin],
		data() {
			return {
				open_id: '',
				hasLogin: false,
				userInfo: {}, // 用户信息
				kefupara: '', //客服传递资料
				afterSaleNums: 0,
				isClerk: false,
				alipayNoLogin: true,
				alipayName: '',
				alipayAvatar: '',
				config: '', //配置信息
				orderItems: [{
						name: '全部订单',
						icon: '/static/img/order-total.png',
						url: '/pages/member/order/orderlist',
						tab:0,
						show:true
					},
					{
						name: '待发货',
						icon: '/static/img/order-send.png',
						url: '/pages/member/order/orderlist',
						tab:2,
						show:true
					},{
						name: '待收货',
						icon: '/static/img/order-shou.png',
						url: '/pages/member/order/orderlist',
						tab:3,
						show:true
					},{
						name: '已完成',
						icon: '/static/img/order-end.png',
						url: '/pages/member/order/orderlist',
						tab:4,
						show:true
					
					}
				],
				utilityMenus: {
					distribution: {
						name: '分销中心',
						icon: '/static/image/distribution.png',
						router: '/pages/member/distribution/user',
						unshowItem: false
					},
					coupon: {
						name: '我的优惠券',
						icon: '/static/image/ic-me-coupon.png',
						router: '/pages/member/coupon/index',
						unshowItem: false,
						nums: 0
					},
					balance: {
						name: '我的余额',
						icon: '/static/image/ic-me-balance.png',
						router: '/pages/member/balance/index',
						unshowItem: false
					},
					invoice: {
						name: '我的发票',
						icon: '/static/image/ic-me-invoice.png',
						router: '/pages/member/invoice/index',
						unshowItem: false
					},
					integral: {
						name: '我的积分',
						icon: '/static/image/integral.png',
						router: '/pages/member/integral/index',
						unshowItem: false
					},
					address: {
						name: '地址管理',
						icon: '/static/image/me-ic-site.png',
						router: '/pages/member/address/list',
						unshowItem: false
					},
					collection: {
						name: '我的收藏',
						icon: '/static/image/ic-me-collect.png',
						router: '/pages/member/collection/index',
						unshowItem: false
					},
					history: {
						name: '我的足迹',
						icon: '/static/image/ic-me-track.png',
						router: '/pages/member/history/index',
						unshowItem: false
					},

				},
				clerk: [{
						name: '个人资料',
						icon: '/static/image/ic-me-take.png',
						router: '/pages/member/setting/user_info/index'

					},
					{
						name: '地址管理',
						icon: '/static/image/me-ic-site.png',
						router: '/pages/member/address/list',
					/* }, {
						name: '邀请粉丝',
						icon: '/static/image/yqhy.png',
						router: '/pages/member/invite/index', */
					
					},
				],
				order: {
					bargain: {
						name: '砍价记录',
						icon: '/static/image/me-ic-sendout.png',
						router: '/pages/member/bargain/list',
						unshowItem: false
					},
					invite: {
						name: '邀请好友',
						icon: '/static/image/ic-me-invite.png',
						router: '/pages/member/invite/index',
						unshowItem: true
					},
					setting: {
						name: '系统设置',
						icon: '/static/image/me-ic-set.png',
						router: '/pages/member/setting/index',
						unshowItem: false
					}
				},
				list: 2,
				suTipStatus: false,
				isNavto: false
			}
		},
		onLoad() {
			this.getUserMenu();
			this.sandLogin()
		},
		onShow() {
			this.isNavto = true;
			if(this.$db.get('userActivate') != 1)
				this.orderItems.splice(1,3)
			this.initData();
			if(this.chujupoint == true)
			{
				this.orderItems[7].show = true
			}
		},
		methods: {
			sandLogin()
			{
				this.$api.sandLogin({},res=>{
					if(res.status)
						{
							let sand_url =[{
					name: '杉德钱包',
					icon: '/static/image/sandico.png',
					router: res.data}]
							this.clerk = [...this.clerk, ...sand_url]
						}
				})
			},
			getUserMenu()
			{
				this.$api.userMenu(res=>{
					this.clerk = [...this.clerk, ...res.data]
				})
			},
			Go(e) {
				uni.navigateTo({
					url: e
				})
			},
			sssskkk(e) {
				let _this = this
				uni.setClipboardData({
					data: e.toString(),
					success: function(data) {
						_this.$common.successToShow('复制成功');
					},
					fail: function(err) {
						console.log(err);
						_this.$common.errorToShow('复制分享URL失败');
					}
				})
			},
			goLogin() {
				uni.navigateTo({
					url: '/pages/login/choose/index'
				})
			},
			navigateToHandle(pageUrl) {
				if (pageUrl !== '/pages/member/coupon/index') {
					if(pageUrl.indexOf('http') !== -1)
					{
						// #ifdef APP
						plus.runtime.openURL(pageUrl)
						// #endif
						// #ifndef APP
						window.location.href = pageUrl
						// #endif
						
						
					}else{
						this.$common.navigateTo(pageUrl)
					}
					
				} else {
					uni.showToast({
						title: '功能未开放',
						icon: 'none'
					})
				}
			},
			getUserInfo(e) {
				let _this = this
				//return false;
				if (e.detail.errMsg == 'getUserInfo:fail auth deny') {
					_this.$common.errorToShow('未授权')
				} else {
					var data = {
						open_id: _this.open_id,
						iv: e.detail.iv,
						edata: e.detail.encryptedData,
						signature: e.detail.signature
					}
					//有推荐码的话，带上
					var invitecode = _this.$db.get('invitecode')
					if (invitecode) {
						data.invitecode = invitecode
					}
					_this.toWxLogin(data)
				}
			},
			getALICode() {
				let that = this
				uni.login({
					scopes: 'auth_user',
					success: (res) => {
						if (res.authCode) {
							uni.getUserInfo({
								provider: 'alipay',
								success: function(infoRes) {
									if (infoRes.errMsg == "getUserInfo:ok") {
										let user_info = {
											'nickname': infoRes.nickName,
											'avatar': infoRes.avatar
										}
										that.aLiLoginStep1(res.authCode, user_info);
									}
								},
								fail: function(errorRes) {
									that.$common.errorToShow('未取得用户昵称头像信息');
								}
							});
						} else {
							that.$common.errorToShow('未取得code');
						}
					},
					fail: function(res) {
						console.log(res)
						that.$common.errorToShow('用户授权失败my.login');
					}
				});
			},

			getWxCode() {
				let that = this
				uni.login({
					scopes: 'auth_user',
					success: function(res) {
						if (res.code) {
							that.wxLoginStep1(res.code)
						} else {
							this.$common.errorToShow('未取得code')
						}
					},
					fail: function(res) {
						this.$common.errorToShow('用户授权失败wx.login')
					}
				})
			},
			wxLoginStep1(code) {
				this.$api.login1({
					code
				}, res => {
					if (res.status) {
						this.open_id = res.data
					} else {
						this.$common.errorToShow(res.msg, function() {
							uni.navigateBack({
								delta: 1
							})
						})
					}
				})
			},
			aLiLoginStep1(code, user_info) {
				let data = {
					'code': code,
					'user_info': user_info
				}
				this.$api.alilogin1(data, res => {
					this.alipayNoLogin = false;
					if (res.status) {
						this.open_id = res.data.user_wx_id
						//判断是否返回了token，如果没有，就说明没有绑定账号，跳转到绑定页面
						if (!res.data.hasOwnProperty('token')) {
							this.$common.navigateTo('/pages/login/login/index?user_wx_id=' + res.data.user_wx_id);
						} else {
							this.$db.set('userToken', res.data.token)
							this.initData()
						}
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			toWxLogin(data) {
				let _this = this
				_this.$api.login2(data, function(res) {
					if (res.status) {
						//判断是否返回了token，如果没有，就说明没有绑定账号，跳转到绑定页面
						if (typeof res.data.token == 'undefined') {
							uni.redirectTo({
								url: '/pages/login/login/index?user_wx_id=' + res.data.user_wx_id
							})
						} else {
							_this.$db.set('userToken', res.data.token)
							_this.initData()
						}
					} else {
						_this.$common.errorToShow('登录失败，请重试')
					}
				})
			},
			toLogin() {
				this.$common.navigateTo('/pages/login/login/index1')
			},
			initData() {
				// 获取用户信息
				var _this = this
				//判断是开启分销还是原始推广
				if (this.$store.state.config.open_distribution) {
					this.order.invite.unshowItem = true
				} else {
					this.utilityMenus.distribution.unshowItem = true
					this.order.invite.unshowItem = false
				}

				if (this.$db.get('userToken')) {
					this.hasLogin = true
					this.$api.userInfo({}, res => {
						if (res.status) {
							_this.userInfo = res.data;
							
							this.$db.set('userActivate',res.data.activate)
							// #ifdef MP-WEIXIN
							//微信小程序打开客服时，传递用户信息
							var kefupara = {}
							kefupara.nickName = res.data.nickname
							kefupara.tel = res.data.mobile
							_this.kefupara = JSON.stringify(kefupara)
							// #endif
							// 获取订单不同状态的数量
							let data = {
								ids: '1,2,3,4',
								isAfterSale: true
							}
							_this.$api.getOrderStatusSum(data, res => {
								if (res.status) {
									_this.orderItems.forEach((item, key) => {
										item.nums = res.data[key + 1]
									})
									_this.afterSaleNums = res.data.isAfterSale ?
										res.data.isAfterSale :
										0
								}
								// console.log(res);
								this.utilityMenus.coupon.nums = res.data.coupon
							})
						}
					})
				} else {
					this.hasLogin = false
				}
			},

			orderNavigateHandle(url, tab = 0) {
				if (!this.hasLogin) {
					if (this.isNavto) {
						this.checkIsLogin()
						this.isNavto = false;
						return
					}
					return
				}
				this.$store.commit('orderTab', tab)
				this.$common.navigateTo(url)
			},
			goAfterSaleList() {
				if (!this.hasLogin) {
					if (this.isNavto) {
						this.checkIsLogin()
						this.isNavto = false;
						return
					}
					return
				}
				this.$common.navigateTo('/pages/member/after_sale/list')
			},
			Go(e) {
				uni.navigateTo({
					url: e
				})
			},
			//在线客服,只有手机号的，请自己替换为手机号
			showChat() {
				// #ifdef H5
				let _this = this
				window._AIHECONG('ini', {
					entId: this.config.ent_id,
					button: false,
					appearance: {
						panelMobile: {
							tone: '#FF7159',
							sideMargin: 30,
							ratio: 'part',
							headHeight: 50
						}
					}
				})
				//传递客户信息
				window._AIHECONG('customer', {
					head: _this.userInfo.avatar,
					'名称': _this.userInfo.nickname,
					'手机': _this.userInfo.mobile
				})
				window._AIHECONG('showChat')
				// #endif

				// 打开客服页面
				// #ifdef APP-PLUS || APP-PLUS-NVUE
				this.$common.navigateTo('/pages/member/customer_service/index');
				// #endif

				// 头条系客服
				// #ifdef MP-TOUTIAO
				if (this.shopMobile != 0) {
					let _this = this;
					tt.makePhoneCall({
						phoneNumber: this.shopMobile.toString(),
						success(res) {},
						fail(res) {}
					});
				} else {
					_this.$common.errorToShow('暂无设置客服电话');
				}
				// #endif
			},
			// toPages(url) {
			// 	console.log(url)
			// 	let userToken = this.$db.get('userToken')
			// 	if (!userToken) {
			// 		common.jumpToLogin()
			// 		return false
			// 	} else {
			// 		this.$common.navigateTo(url)

			// 	}
			// },

		},
		computed: {
			// 获取店铺联系人手机号
			shopMobile() {
				return this.$store.state.config.shop_mobile || 0;
			},
			invoice_switch() {
				return this.$store.state.config.invoice_switch || 2;
			},
			store_switch() {
				return this.$store.state.config.store_switch || 0;
			},
			chujupoint() {
				return this.$store.state.config.chujupoint || 0;
			}
		},
		watch: {}
	}
</script>

<style lang="scss" scoped>
	.MyMoney {
		background-color: #202126;
		margin: 0 30rpx;
		padding: 20upx 20upx 30upx 20upx;
		border-radius: 20rpx;

		.Title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #D4D4D4;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;

			.TitleLeft {
				font-weight: bold;
				color: #fff;
				font-size: 28rpx;
			}

			.TitleRight {
				background: #202126;
				border-radius: 10rpx;
				font-weight: 500;
				border: 2rpx solid #F2D7AA;
				color: #F2D7AA;
				font-size: 20rpx;
				text-align: center;
				padding: 6rpx 20rpx;
			}
		}



		.Content {
			background: linear-gradient(180deg, #F2D7AA 0%, #DEBC86 100%);
			border-radius: 20rpx;
			display: flex;
			padding: 30rpx 0 18rpx;

			.ContentLeft {
				flex: 1;
				text-align: center;

				.LeftTop {
					font-size: 28rpx;
					font-weight: 500;
					color: #202126FF;
				}

				.YE {
					color: #202126FF;
					font-weight: bold;
					font-size: 36rpx;
					margin-top: 13rpx;
				}
			}


			.ContentRight {
				flex: 1;
				text-align: center;
				border-right: 1rpx solid #202126FF;
				border-left: 1rpx solid #202126FF;

				.RightTop {
					font-size: 28rpx;
					font-weight: 500;
					color: #202126FF;
				}

				.YE {
					color: #202126FF;
					font-weight: bold;
					font-size: 36rpx;
					margin-top: 13rpx;
				}
			}

			.ContentRight2 {
				flex: 1;
				text-align: center;

				.RightTop {
					font-size: 28rpx;
					font-weight: 500;
					color: #202126FF;
				}

				.YE {
					color: #202126FF;
					font-weight: bold;
					font-size: 36rpx;
					margin-top: 13rpx;
				}
			}
		}
	}


	.Other {
		margin: 20rpx 30rpx;
		padding: 20rpx 30rpx 30rpx 30rpx;
		background-color: #202126;
		border-radius: 20rpx;

		.OtherTitle {

			font-size: 28rpx;
			font-weight: bold;
			color: #fff;
			padding-bottom: 20rpx;
			margin-bottom: 30rpx;
			border-bottom: 1rpx solid #d4d4d4;
		}

		.List {
			display: flex;
			flex-wrap: wrap;

			.Item {
				margin-bottom: 41rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 25%;
				justify-content: space-between;

				.name {
					color: #fff;
					font-size: 20rpx;
				}
			}
		}

	}

	.Other {
		margin: 0 30rpx;
		padding: 20rpx 30rpx 30rpx 30rpx;
		margin-bottom: 20rpx;

		.OtherTitle {

			font-size: 28rpx;
			font-weight: bold;
			color: #fff;
			padding-bottom: 20rpx;
			margin-bottom: 30rpx;
			border-bottom: 1rpx solid #d4d4d4;

			.L {
				color: #fff;
			}

			.R {
				display: flex;
				align-items: baseline;
				font-size: 24rpx;
				color: #B9B9B9FF;
			}
		}

		.Box {
			display: flex;
			align-items: center;

			.BoxItem {
				flex: 1;
				text-align: center;
				font-size: 36rpx;
				font-weight: bold;
				color: #F2D7AAFF;

				view {
					font-size: 28rpx;
					color: #fff;
					margin-top: 8rpx;
				}
			}
		}


		.List {
			display: flex;
			flex-wrap: wrap;

			.Item {
				margin-bottom: 41rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 25%;
				justify-content: space-between;

				.name {
					color: #fff;
					font-size: 20rpx;
				}
			}
		}

	}




	.member-top {
		position: relative;
		width: 100%;
		height: 380upx;
		// background: linear-gradient(91deg, #5CD3E1 0%, #70E5D5 100%);
	}

	.bg-img {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.member-top-c {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}

	.user-head-img {
		display: block;
		width: 150upx;
		height: 150upx;
		border-radius: 50%;
		overflow: hidden;
		background-color: rgba(255, 255, 255, 0.7);
		margin: 0 auto 16upx;
	}

	.user-name {
		font-size: 30upx;
		color: #fff;
		margin-bottom: 16upx;
	}

	.grade {
		color: #FFF;

		.sign {
			display: inline-block;
			padding: 10rpx 26rpx;
			background: #FF7159;
			color: #FFFFFF;
			border-radius: 10rpx;
			margin-left: 10rpx;
		}
	}

	.member-grid {
		border-top: 2upx solid #D4D4D4;
		padding: 20upx 0;
		padding-top: 40rpx;
	}

	.margin-cell-group {
		margin: 20upx 0;
		color: #666666;
	}

	.badge {
		left: 80upx;
		top: -6upx;
	}

	button.cell-item-hd {
		background-color: #fff;
		padding: 0;
		line-height: 1.4;
		color: #333;
	}

	button.cell-item-hd:after {
		border: none;
	}

	.login-btn {
		color: #fff;
		width: 180upx;
		height: 50upx;
		line-height: 50upx;
		border-radius: 25upx;
		background: #ff7159;
		font-size: 12px;
	}

	.sale-block {
		padding: 0 20upx;
		margin-bottom: 20upx;

		.sale-title {
			height: 72rpx;
			line-height: 72rpx;
			border-bottom: 2rpx solid #f0f0f0;
			display: flex;
			align-items: center;

			.iconfont {
				margin-right: 12upx;
				color: $theme-color;
			}
		}

		.sale-list {
			justify-content: flex-start;
			flex-wrap: wrap;

			.item {
				width: 25%;
				padding: 20upx 0;

				.iconfont {
					font-size: 40upx;
					color: #5e5e5e;
				}

				.text {
					margin-top: 12upx;
					color: #4d4d4d;
					font-size: 24rpx;
					position: relative;
				}
			}

			.tc {
				text-align: center;

				.cell-hd-icon {
					float: none;
					width: 60rpx;
					height: 60rpx;
					margin: 0;
				}
			}
		}
	}

	.coupon {
		top: -40px;
		left: 50px;
	}
</style>